<template>
    <div class="content">
        <div class="card">
            <div class="card-header">
                <div class="card-header-title">
                    <b>收藏栏</b>
                    <el-select v-model="value" filterable placeholder="请选择" size="small" @change="selectStudyGrade()">
                        <el-option
                        v-for="item in studyGradeList"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id">
                        </el-option>
                    </el-select>
                </div>
            </div>
            <el-divider></el-divider>
            <div class="card-body">
                <el-table
                    :data="userCollectionWordList"
                    :header-cell-style="{'color':'#212529', 'text-align': 'center'}"
                    :cell-style="{'text-align':'center'}" >
                    <el-table-column
                        prop="name"
                        label="单词"
                        width="180">
                    </el-table-column>
                    <el-table-column
                        prop="audio"
                        label="读音"
                        width="180">
                    </el-table-column>
                    <el-table-column
                        prop="explanation"
                        label="解释">
                    </el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button class="word-audio"
                            size="mini"
                            @click="playAudio(scope.$index, scope.row)">{{scope.row.audio}}</el-button>
                            <audio id="audioPlay"></audio>
                            <el-button
                            size="mini"
                            type="danger"
                            @click="handleDelete(scope.$index, scope.row)">取消收藏</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
    </div>
</template>

<script>
import cookie from "js-cookie";
import studyApi from '@/api/study'

export default {

  data() {
    return {
        // https://blog.csdn.net/xh_960125/article/details/106626615
        value: '',
        studyGradeList: [],
        userCollectionWordList: []

    };
  },

  created() {
    this.getStudyGradeList()
  },

  methods: {

    // 播放音频
    playAudio(index, row) {
        document.getElementById("audioPlay").src = 'https://dict.youdao.com/dictvoice?audio=' + row.name
        document.getElementById("audioPlay").play()
    },

    handleDelete(index, row) {
        console.log('取消收藏')
        
        this.$confirm('此操作将单词从收藏夹移除, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          studyApi.delectUserCollectionWord(row.id).then(response => {
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
            this.getUserCollectionWordList(this.value)
          })

        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });



    },

    //下拉条改变
    selectStudyGrade() {
        //this.value 即等级ID
        //刷新收藏夹单词列表
        this.getUserCollectionWordList(this.value)
    },

    //获取等级列表
    getStudyGradeList() {
        studyApi.getStudyGradeList().then(response => {
            var data = response.data.data
            this.studyGradeList = data.list 
            this.value = this.studyGradeList[0].id 
            this.getUserCollectionWordList(this.value)
        })
    },

    //获取收藏夹单词列表
    getUserCollectionWordList(grade) {
        studyApi.getUserCollectionWordList(grade).then(response => {
            var data = response.data.data
            this.userCollectionWordList = data.list
        })
    }
  }
};
</script>

<style scoped>
.content {
  margin: 0 auto;  
  background-color: #F1F2F7;
  padding-top: 10px;
  padding-bottom: 500px;
}

.card {
    max-width: 1150px;
    border: 3px solid #E8E9EE;
    border-radius: 10px;
    margin: 0 auto;
    background-color: #FFFFFF;
}

.card-header {
    padding: 5px 20px;
    background-color: #F7F7F7;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
}

.card-header-title {
    font-size: 18px;
}

.el-select {
    float: right;
}

.el-divider {
    margin-bottom: 0px;
    margin-top: 0px;
}

.card-body {
    padding: 10px 25px;
}

.el-table {
    margin: 0 auto;
}

.word-audio {
    background-color: #EFEFEF;
    color: #878787;
    border: 1px solid #212121;
}

</style>